import React, { useState } from 'react'
import {
	View,
	ViewStyle,
	TextStyle,
	StyleSheet,
	ImageStyle,
	Image,
	TouchableOpacity,
	Text,
} from 'react-native'
import { InfoLayout, SettingMoney, Division, ChangeCard, ShortBar } from 'components'
import { translateSize, themeColors, commonStyle, definedColors } from 'styles'
import InputMoney from '../../../components/InputMoney'
import assets from 'modules/assets'
import { navigate } from 'services/navigation'
import { PosAppFee } from 'api/pos';
import { Alert } from 'react-native';
import { operate } from 'services/authorization';

interface OrderItemProps {
	key: string
	data: PosAppFee
	onChange: (money: Number, isCheck: boolean) => void
}

const OrderItem: React.FC<OrderItemProps> = props => {
	const [isCheck, setCheck] = useState(false)
	const [money, setMoney] = useState(props.data.ye)

	return (
		<View style={styles.itemContainer} key={props.key}>

			<TouchableOpacity
				style={{
					...commonStyle.containerRow,
					alignItems: 'flex-end',
					justifyContent: 'space-between',
				}}
				onPress={() => {
					operate()
					props.onChange(money, !isCheck)
					setCheck(!isCheck)

				}}>
				<ShortBar style={styles.fundName} title={props.data.fundName || ''} />
				{
					props.data.fundActual < props.data.fundAmount && !props.data.ifbg ?
						<View style={styles.checkContainer}>
							<Image
								style={{ ...styles.check }}
								source={isCheck ? assets.images.icon_check : assets.images.icon_uncheck}
							/></View>
						: null
				}

			</TouchableOpacity>
			{/* <InfoLayout title="项目排号：" content="123542" /> */}
			<InfoLayout title="应收金额：" content={`${props.data.fundAmount}`} />
			<InfoLayout title="应收日期：" content={`${props.data.ysrq}`} />
			<TouchableOpacity
				onPress={() => {
					operate()
					navigate('GetinList', { erpFeeId: props.data.erpId })
				}}>
				<InfoLayout
					title="已收金额："
					titlePartner={
						<View
							style={{ ...commonStyle.ringButton, borderColor: definedColors.chocolate }}					>
							<Text style={styles.trade}>明细</Text>
						</View>
					}
					content={`${props.data.fundActual}`}
				/></TouchableOpacity>
			<SettingMoney />
			<InputMoney
				// key={money}
				editable={true}
				upperLimit={999999999}
				defaultValue={money}
				onChange={money => {
					props.onChange(Number(money), isCheck)
					setMoney(money)
				}}
			/>
			<Division />
			{/* <ChangeCard
				style={{ paddingBottom: translateSize(24) }}
				cardInfo={{ name: '中国银行', cardId: '34545893854308503854903' }}
				onPress={() => { }}
			/> */}
		</View>
	)
}

interface OrderItemStyle {
	checkContainer: ViewStyle
	check: ImageStyle
	itemContainer: ViewStyle
	titleContainer: ViewStyle
	itemRow: ViewStyle
	trade: TextStyle
	projectContainer: ViewStyle
	room: TextStyle
	title: TextStyle
	fundName: TextStyle
}

export const styles = StyleSheet.create<OrderItemStyle>({
	itemContainer: {
		flexDirection: 'column',
		paddingTop: translateSize(30),
		backgroundColor: themeColors.pageBg,
	},
	fundName: {
		width: '80%',
		paddingTop: translateSize(32),
		paddingLeft: translateSize(32),
	},
	title: {
		maxWidth: '40%',
		paddingLeft: translateSize(30),
	},
	titleContainer: {
		// flexDirection: 'row',
		// alignItems: 'center',
		width: '100%',
		paddingTop: translateSize(43),
		// marginBottom: translateSize(30),
		backgroundColor: definedColors.white,
		paddingRight: translateSize(43),
	},
	checkContainer: {
		// backgroundColor: definedColors.firebrick,
		// width: '20%',
		paddingRight: translateSize(32),
		paddingLeft: translateSize(50),
		paddingTop: translateSize(20),
	},
	check: {
		width: translateSize(50),
	},
	itemRow: {
		paddingLeft: translateSize(62),
		paddingRight: translateSize(32),
	},
	trade: {
		fontSize: translateSize(24),
		paddingHorizontal: translateSize(15),
		paddingVertical: translateSize(4),
		color: definedColors.chocolate,
	}, room: {
		paddingLeft: translateSize(40),
	},
	projectContainer: {
		// height: translateSize(71),
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	}
})

export default OrderItem
